<template>
  <view v-if="isLogin" class="shop-bag">
    <!-- 顶部导航栏-->
    <!-- <HeaderNav title="购物袋" rightText="编辑" :comeBack='comeBack'></HeaderNav> -->
    <view class="header">
      <view class="left-text" @click="comeBack">
        <uni-icons type="back" size="10" color="#0c34ba"></uni-icons>
        返回
      </view>
      <view class="title">
        购物袋
      </view>
      <view class="right-text" @click="isEdit=!isEdit">
        {{isEdit?'完成':'编辑'}}
      </view>
    </view>


    <!-- 横幅-->
    <view class="banner">
      <image src="../../static/icons/shopbag_bg.png" mode="widthFix"></image>
    </view>


    <!-- 商品 -->
    <view class="goods" v-if="goodsAddprop.length">
      <view class="goods-item" v-for="(e,index) in goodsAddprop" :key="e['pid']+index">
        <!-- 单选框-->
        <view class="goods-ckb" @click="e['isActive']=!e['isActive']">
          <label class="radio">
            <radio value="" :checked="e['isActive']" color="#0c34ba" style="transform: scale(70%);" /><text></text>
          </label>
        </view>

        <!-- 商品详细-->
        <view class="goods-info">
          <view class="goods-cover">
            <image :src="e['small_img']" mode="widthFix"></image>
          </view>

          <view class="c2">
            <!-- 第一行-->
            <view class="r1">
              <view class="name">
                {{e['name']}}
              </view>
              <view class="rule">
                {{e['rule']}}
              </view>
            </view>
            <!-- 第二行英文名-->
            <view class="r2-enname">
              {{e['enname']}}
            </view>

            <!-- 第三行 -->
            <view class="r3">
              <view class="price">
                ￥{{e['price']}}
              </view>

              <!-- 数量选择-->
              <view class="operation">
                <view class="dec" @click="dec(e)">
                  <image src="../../static/svg/dec.svg"></image>
                </view>
                <view class="num">
                  {{e['count']}}
                </view>
                <view class="inc" @click="inc(e)">
                  <image src="../../static/svg/inc.svg"></image>
                </view>
              </view>
            </view>

          </view>

        </view>

      </view>
    </view>

    <MyEmpty v-else title="暂无商品"></MyEmpty>
    <!-- 底部 -->
    <view class="goods-carts">
      <label class="radio" @click="checkAllHandler">
        <radio color="#0c34ba" :checked="isAllChecked" style="transform: scale(70%);" /><text
          style="font-size: 20rpx;">全选</text>
      </label>
      <view class="r" v-show="!isEdit">
        <view class="total">
          合计：<text class="money">￥{{totalPrice}}</text>
        </view>
        <view class="submit-order" @click="commitOrdersHandler">
          提交订单
        </view>
      </view>
      <view class="r del-cart-shop" v-show="isEdit" @click="delChooseHandler">
        删除已选择
      </view>
    </view>


  </view>
  <NoLogin v-else></NoLogin>
</template>

<script>
  import MyEmpty from '../../components/MyEmpty/MyEmpty.vue'
  import NoLogin from '../../components/NoLogin/NoLogin.vue'
  import HeaderNav from '../../components/HeaderNav/HeaderNav.vue'
  import {
    req
  } from '../utils/request/request'
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: "shop-bag",
    components: {
      HeaderNav,
      NoLogin,
      MyEmpty
    },
    data() {
      return {
        goods: [],
        isEdit: false
      }
    },
    computed: {
      ...mapGetters("user", ['isLogin']),
      goodsAddprop() {
        const arr = []
        this.goods.forEach(e => {
          this.$set(e, 'isActive', false)
          arr.push(e)
        })
        return arr
      },
      isAllChecked() {
        const len = this.goods.filter(e => !e['isActive']).length
        return len ? false : true
      },
      totalPrice() {
        return this.goodsAddprop.filter(x => x.isActive).reduce((total, item) => total += item.count * item.price, 0)
          .toFixed(2)
      },
      getSids() {
        const arr = []
        this.goodsAddprop.forEach(e => {
          if (e['isActive']) {
            arr.push(e['sid'])
          }
        })
        return arr
      }
    },
    onLoad() {},
    onShow() {
      this.isLogin && this.queryAllShopcart()
    },
    methods: {
      /* 删除已选择的商品 */
      delChooseHandler() {
        this.removeShopcart(this.getSids)
      },
      /* 选择所有 */
      checkAllHandler() {
        if (!this.isAllChecked) {
          this.goods.forEach(e => {
            e['isActive'] = true
          })
        } else {
          this.goods.forEach(e => {
            e['isActive'] = false
          })
        }
      },
      /* 获取商品数量 */
      queryShopcartCount() {
        req('shopcartCount', {
          isToken: true
        }).then(res => {
          console.log(res);
        }, err => {
          console.log(err);
        })
      },
      /* 查询购物车的所有商品*/
      queryAllShopcart() {
        req('findAllShopcart', {
          isToken: true
        }).then(({
          data: res
        }) => {
          this.goods = res['result']
        }, err => {
          console.log(err);
        })
      },
      dec({
        sid,
        count
      }) {
        if (count <= 1) {
          this.removeShopcart([sid])
          return
        }
        const tmp = count - 1
        this.modifyShopcartCount(sid, tmp)
      },
      inc({
        sid,
        count
      }) {
        const tmp = count + 1
        this.modifyShopcartCount(sid, tmp)
      },

      /* 修改购物车商品数量*/
      modifyShopcartCount(sid, count) {
        req('modifyShopcartCount', {
          reqData: {
            sid,
            count
          },
          isToken: true,
          method: 'post'
        }).then(({
          data: res
        }) => {
          if (res['code'] === 6000) {
            const find = this.goods.find(x => x['sid'] === sid)
            find['count'] = count
          }
        }, err => {
          console.log(err);
        })
      },

      /* 移除购物车商品*/
      removeShopcart(sid) {
        req('removeShopcart', {
          isToken: true,
          method: 'post',
          reqData: {
            sids: JSON.stringify(sid)
          }
        }).then(res => {
          this.queryAllShopcart()
          // this.goods = this.goods.filter
        }, err => {
          console.log(err);
        })
      },

      /*删除购物车商品 真实删除*/
      deleteShopcart() {
        req('deleteShopcart', {
          isToken: true,
          reqData: {
            sids: JSON.stringify(['1', '2'])
          },
          method: 'post'

        }).then(res => {
          console.log(res);
        }, err => {
          console.log(err);
        })
      },
      /* 购物车总数量*/
      shopcartRows() {
        req('shopcartRows', {
          isToken: true
        }).then(res => {}, err => {
          console.log(err);
        })
      },


      /* 提交订单*/
      commitOrdersHandler() {
        if (!this.getSids.length) return;
        req('commitShopcart', {
          reqData: {
            sids: JSON.stringify(this.getSids)
          },
          isToken: true
        }).then(({
          data: res
        }) => {
          // console.log(res);
          uni.navigateTo({
            url: "/pages/order/order?sids=" + JSON.stringify(this.getSids)
          })
        }, err => {
          console.log(err);
        })

      },


      comeBack() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .shop-bag {
    background-color: #f7f7f7;
    padding-bottom: 100rpx;
    height: 100vh;

    .header {
      height: 98rpx;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      background-color: #fff;

      .title {
        font-size: 26rpx;
      }

      .left-text {
        color: #0c34ba;
      }
    }

    .banner {
      image {
        width: 100%;
      }
    }

    .goods {
      margin-top: 20rpx;

      .goods-item {
        margin-bottom: 20rpx;
        box-sizing: border-box;
        padding: 20rpx 40rpx;
        background-color: #fff;
        display: flex;
        align-items: center;

        .goods-info {
          display: flex;
          flex: 1;

          .goods-cover {
            width: 25%;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .c2 {
            flex: 1;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .r1 {
              display: flex;
              font-size: 26rpx;

              .name {
                margin-right: 25rpx;
                color: #646566;
              }

              .rule {
                color: #646566;
              }
            }

            .r2-enname {
              font-size: 26rpx;
              color: #ccc
            }

            .r3 {
              display: flex;
              justify-content: space-between;
              margin: 10rpx 0;
              align-items: center;

              .price {
                color: #0c34ba;
                font-size: 26rpx;
                font-weight: bold;
              }

              .operation {
                display: flex;
                align-items: center;

                .num {
                  margin: 0 20rpx;
                  width: 50rpx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }

                .inc,
                .dec {
                  height: 50rpx;
                  width: 50rpx;
                  overflow: hidden;

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }

                .dec {
                  height: 40rpx;
                  width: 40rpx;
                }
              }
            }
          }

          .goods-cover {
            image {
              width: 140rpx;
            }
          }
        }
      }
    }

    .goods-carts {
      position: fixed;
      bottom: 90rpx;
      height: 100rpx;
      background-color: #fff;
      left: 0;
      right: 0;
      box-shadow: 2rpx 0 50rpx 10rpx #3333331c;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      .radio {
        display: flex;
        align-items: center;
      }

      .r {
        display: flex;
        align-items: center;

        &.del-cart-shop {
          font-size: 24rpx;
          background-color: #df4b4b;
          color: #fff;
          border-radius: 10rpx;
          padding: 18rpx 50rpx;
        }

        .submit-order {
          background-color: #0c34ba;
          color: #fff;
          border-radius: 50rpx;
          padding: 18rpx 50rpx;
          font-size: 24rpx
        }

        .total {
          font-size: 24rpx;
          margin-right: 20rpx;

          .money {
            color: #0c34ba;
          }
        }
      }
    }
  }
</style>
